<script lang="ts" setup>
  import { ref } from 'vue';
  import { User } from '@/types/user';
  import { Form, Message } from '@arco-design/web-vue';
  import { confirmPlayerTotalScore } from '@/api/game';
  import { api as viewerApi } from 'v-viewer';
  import { PlayerResults } from '@/config/game';

  const props = defineProps<{
    gameId?: string;
    user?: User;
    pic?: string;
    gameResult?: string;
    playerResult?: number;
  }>();

  const emit = defineEmits(['close']);

  const data = ref<{
    gameResult?: string;
    playerResult?: number;
  }>({
    gameResult: props.gameResult,
    playerResult: props.playerResult || 1,
  });

  const beginViewPics = () => {
    try {
      const pics = JSON.parse(props.pic as string);
      viewerApi({
        images: pics,
        options: {
          navbar: false,
        },
      });
    } catch (e) {
      viewerApi({
        images: [props.pic as string],
        options: {
          navbar: false,
        },
      });
    }
  };

  const withHandicap = ref(1);

  const saving = ref(false);
  const formRef = ref<InstanceType<typeof Form> | null>(null);
  const handleSubmit = async () => {
    if (formRef.value) {
      const validateResult = await formRef.value.validate();
      if (!validateResult) {
        try {
          saving.value = true;

          await confirmPlayerTotalScore(
            {
              userId: props.user?.id,
              gameId: props.gameId,
              confirm: 1,
              gameResult: data.value.gameResult,
              playerResult: data.value.playerResult,
            },
            {
              withHandicap: withHandicap.value,
            }
          );

          Message.success('操作成功');
          emit('close', true);
        } finally {
          saving.value = false;
        }
      }
    }
  };
</script>

<template>
  <a-modal
    title="确认总成绩"
    :width="500"
    visible
    :ok-loading="saving"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <div style="padding: 0 50px">
      <a-form ref="formRef" :model="data" auto-label-width>
        <a-form-item label="球员">
          <div>
            {{ user?.nickname }}
            <span style="margin-left: 5px; color: var(--color-text-2)">
              {{ user?.sex ? '男' : '女' }}
            </span>
            <span style="margin-left: 5px; color: var(--color-text-2)">
              {{ user?.ageType === 1 ? '青少年' : '成人' }}
            </span>
          </div>
        </a-form-item>
        <a-form-item label="手机号码">
          <div>{{ user?.phone }}</div>
        </a-form-item>
        <a-form-item label="证件号码">
          <div>{{ user?.idNo }}</div>
        </a-form-item>
        <a-form-item label="计分卡照片">
          <a-link @click="beginViewPics">点击查看</a-link>
        </a-form-item>
        <a-form-item
          label="最终成绩"
          field="playerResult"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <a-select v-model="data.playerResult" :options="PlayerResults" />
        </a-form-item>
        <a-form-item label="获得成就" field="gameResult">
          <a-input v-model="data.gameResult" />
        </a-form-item>
        <a-form-item label="是否更新差点">
          <a-radio-group
            v-model="withHandicap"
            :options="[
              { label: '更新', value: 1 },
              { label: '不更新', value: 0 },
            ]"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
